﻿<!DOCTYPE html>
<html>
<head>
  <title>Тверская ямская</title>
  <meta charset="utf-8">
  <script>
  function onload(){
    let nameid;
    let colorid;
    let nameid1;
    let nameid2;
    let colorid1;
    let colorid2;
    //VRV
    for (let j = 0; j < 16; j++) {
     nameid="cn"+j;
     colorid="cs"+j;
     document.getElementById(nameid).textContent=$TY_KName[j];
     document.getElementById(colorid).style.backgroundColor= "#ffff00";
     document.getElementById(colorid).addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="500px";
      popup.style.height="350px";
    });
    }
    let colorel1;
    let colorel2;
    //SRK
    for (let j = 0; j < 2; j++) {
     nameid1="ctn"+j+"0";
     nameid2="ctn"+j+"1";
     colorid1="cts"+j+"0";
     colorid2="cts"+j+"1";
     document.getElementById(nameid1).textContent=$TY_SRKC1Name[j];
     document.getElementById(nameid2).textContent=$TY_SRKC2Name[j];
     colorel1=document.getElementById(colorid1);
     colorel2=document.getElementById(colorid2);
     if($TY_SRKDisconnected[j]!=0){colorel1.style.backgroundColor = "#808080";
     colorel2.style.backgroundColor = "#808080";}
     else{
      if($TY_SRKC1alr[j]>0){colorel1.style.backgroundColor = "#FF0000";}
      else{
       if($TY_SRKC1on[j]==0){colorel1.style.backgroundColor = "#ffffff";}
       else{colorel1.style.backgroundColor = "#FFFF00";}
      }
      if($TY_SRKC2alr[j]>0){colorel2.style.backgroundColor = "#FF0000";}
      else{
       if($TY_SRKC2on[j]==0){colorel2.style.backgroundColor = "#ffffff";}
       else{colorel2.style.backgroundColor = "#FFFF00";}
      }
     }   
     document.getElementById(colorid1).addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="500px";
      popup.style.height="300px";
     });
     document.getElementById(colorid2).addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="500px";
      popup.style.height="300px";
     });
    }
    //JOY
    document.getElementById("hs0").style.backgroundColor= "#ffff00";
     document.getElementById("hs0").addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="450px";
      popup.style.height="300px";
    });
    //ПВ1
    nameid="vn0";
     colorid="vs0";
     document.getElementById(nameid).textContent=$TY_VentP1Name;
     document.getElementById(colorid).style.backgroundColor= "#ffff00";
     document.getElementById(colorid).addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="800px";
      popup.style.height="600px";
     });
    //П2
    nameid="vn1";
     colorid="vs1";
     document.getElementById(nameid).textContent=$TY_VentP2Name;
     document.getElementById(colorid).style.backgroundColor= "#ffff00";
     document.getElementById(colorid).addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="600px";
      popup.style.height="400px";
     });
    //Вытяжки
    for (let j = 0; j < 5; j++) {
     nameid="vn"+(j+2);
     colorid="vs"+(j+2);
     document.getElementById(nameid).textContent=$TY_VventName[j];
     document.getElementById(colorid).style.backgroundColor= "#ffff00";
     document.getElementById(colorid).addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="400px";
      popup.style.height="300px";
     });
    }
    //РЩ
    document.getElementById("es0").style.backgroundColor= "#ffff00";
     document.getElementById("es0").addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="450px";
      popup.style.height="300px";
    });
   //UPS
    document.getElementById("un0").textContent=$TY_UPSName;
    document.getElementById("us0").style.backgroundColor= "#ffff00";
     document.getElementById("us0").addEventListener("click", function () {
      overlay.style.display = "block";
      popup.style.display = "block";
      popup.style.width="650px";
      popup.style.height="500px";
    });
    
    showvalues();
  }
  function showvalues() {
   let colorel;
   //VRV
   for (let j = 0; j < 16; j++) {
     colorid="cs"+j;
     colorel=document.getElementById(colorid);
     if($TY_KMode[j]==0 || $TY_KRst==0){colorel.style.backgroundColor="#808080";}
     else {
      if($TY_KAlarm[j]!=0){colorel.style.backgroundColor="#ff0000";}
      else{
       if($TY_KOn[j]>0) {colorel.style.backgroundColor="#00ff00";}
       else {colorel.style.backgroundColor="#ffffff";}
      }
     }
     
   }
   //SRK
   for (j = 0; j < 2; j++) {
     colorid1="cts"+j+"0";
     colorid2="cts"+j+"1";
     colorel1=document.getElementById(colorid1);
     colorel2=document.getElementById(colorid2);
     if($TY_SRKDisconnected[j]!=0){colorel1.style.backgroundColor = "#808080";
     colorel2.style.backgroundColor = "#808080";}
     else{
      if($TY_SRKC1alr[j]>0){colorel1.style.backgroundColor = "#FF0000";}
      else{
       if($TY_SRKC1on[j]==0){colorel1.style.backgroundColor = "#ffffff";}
       else{colorel1.style.backgroundColor = "#00FF00";}
      }
      if($TY_SRKC2alr[j]>0){colorel2.style.backgroundColor = "#FF0000";}
      else{
       if($TY_SRKC2on[j]==0){colorel2.style.backgroundColor = "#ffffff";}
       else{colorel2.style.backgroundColor = "#00FF00";}
      }
     } 
   }
  //JOY
  el = document.getElementById("hs0");
  if($TY_JoyDisconnect!=0){el.style.backgroundColor="#808080";}
   else if($TY_JoyOn>0){el.style.backgroundColor="#00ff00";}
   else {el.style.backgroundColor="#ffffffff";}
  //Вытяжки
   for (let j = 0; j < 5; j++) {
     colorid="vs"+(j+2);
     colorel=document.getElementById(colorid);
     if($TY_ShakRS<0){colorel.style.backgroundColor="#808080";}
     else {
      if($TY_VventAlarm[j]!=0){colorel.style.backgroundColor="#ff0000";}
      else{
       if($TY_VventOn[j]>0) {colorel.style.backgroundColor="#00ff00";}
       else {colorel.style.backgroundColor="#ffffff";}
      }
     }
    }
   //П2
   el = document.getElementById("vs1");
   if($TY_ShakRS!=0){el.style.backgroundColor="#808080";}
   else {   
    if($TY_VentP2Alarm!==0){el.style.backgroundColor="#00ff00";}
    else if($TY_VentP2On>0){el.style.backgroundColor="#00ff00";}
    else {el.style.backgroundColor="#ffffffff";}
   }
   //UPS
  el = document.getElementById("us0");
  if($TY_UPSRS>20){el.style.backgroundColor="#808080";}
   else if($TY_UPSAlarmTotal2>0 || TY_UPSAlarmTotal>0){el.style.backgroundColor="#ff0000";}
   else {el.style.backgroundColor="#00ff00";}
 }
function getvalues() {
fetch("TY_KOn-TY_KMode-TY_KAlarm-TY_KRst-TY_SRKDisconnected-TY_SRKC1alr-TY_SRKC2alr-TY_SRKC1on-TY_SRKC2on-TY_JoyDisconnect-TY_JoyOn-TY_ShakRS-TY_VventAlarm-TY_VventOn-TY_UPSRS-TY_UPSAlarmTotal-TY_UPSAlarmTotal2-TY_VentP2Alarm-TY_VentP2On.json").then(function(response) {
response.text().then(function(text) {
const jsonobj=JSON.parse(text);
TY_KOn=jsonobj.TY_KOn;
TY_KMode=jsonobj.TY_KMode;
TY_KAlarm=jsonobj.TY_KAlarm;
TY_KRst=jsonobj.TY_KRst;
TY_SRKDisconnected=jsonobj.TY_SRKDisconnected;
TY_SRKC1alr=jsonobj.TY_SRKC1alr;
TY_SRKC2alr=jsonobj.TY_SRKC2alr;
TY_SRKC1on=jsonobj.TY_SRKC1on;
TY_SRKC2on=jsonobj.TY_SRKC2on;
TY_JoyDisconnect=jsonobj.TY_JoyDisconnect;
TY_JoyOn=jsonobj.TY_JoyOn;
TY_ShakRS=jsonobj.TY_ShakRS;
TY_VventAlarm=jsonobj.TY_VventAlarm;
TY_VventOn=jsonobj.TY_VventOn;
TY_UPSRS=jsonobj.TY_UPSRS;
TY_UPSAlarmTotal=jsonobj.TY_UPSAlarmTotal;
TY_UPSAlarmTotal2=jsonobj.TY_UPSAlarmTotal2;
TY_VentP2Alarm=jsonobj.TY_VentP2Alarm;
TY_VentP2On=jsonobj.TY_VentP2On;
  showvalues();
  });
});
}
  </script>
  <style>
  body {
  background-image: url("images/TY1floor.png");
  background-repeat: no-repeat;
  font-family:arial;
  }
  h1{font-size: 20px;}
  .imc0 {position: absolute; top: 650px; left: 400px;}
  .imc1 {position: absolute; top: 650px; left: 500px;}
  .imc2 {position: absolute; top: 650px; left: 600px;}
  .imc3 {position: absolute; top: 650px; left: 700px;}
  .imc4 {position: absolute; top: 650px; left: 800px;}
  .imc5 {position: absolute; top: 300px; left: 70px;}
  .imc6 {position: absolute; top: 300px; left: 220px;}
  .imc7 {position: absolute; top: 300px; left: 840px;}
  .imc8 {position: absolute; top: 300px; left: 940px;}
  .imc9 {position: absolute; top: 300px; left: 1060px;}
  .imc10 {position: absolute; top: 680px; left: 1020px;}
  .imc11 {position: absolute; top: 600px; left: 1020px;}
  .imc12 {position: absolute; top: 650px; left: 280px;}
  .imc13 {position: absolute; top: 530px; left: 380px;}
  .imc14 {position: absolute; top: 530px; left: 480px;}
  .imc15 {position: absolute; top: 530px; left: 580px;}
  .imct00 {position: absolute; top: 105px; left: 900px;}
  .imct01 {position: absolute; top: 140px; left: 910px;}
  .imct10 {position: absolute; top: 105px; left: 1000px;}
  .imct11 {position: absolute; top: 140px; left: 1010px;}
  .imv0 {position: absolute; top: 460px; left: 480px;}
  .imv1 {position: absolute; top: 495px; left: 500px;}
  .imv2 {position: absolute; top: 177px; left: 910px;}
  .imv3 {position: absolute; top: 495px; left: 300px;}
  .imv4 {position: absolute; top: 495px; left: 595px;}
  .imv5 {position: absolute; top: 495px; left: 730px;}
  .imv6 {position: absolute; top: 177px; left: 170px;}

  .ime {position: absolute; top: 70px; left: 900px;}
  .imu {position: absolute; top: 70px; left: 1000px;}
  .imh {position: absolute; top: 710px; left: 590px;}
.button_c {
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
    border: 3px solid #006089;
    border-radius: 12px;
    font-size: 16px;
    padding: 15px 45px;
background-image: url("images/icond.png");
background-repeat: no-repeat;}
.button_ct {
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
    border: 3px solid #006089;
    border-radius: 12px;
    font-size: 16px;
    padding: 15px 45px;
background-image: url("images/icondt.png");
background-repeat: no-repeat;}
.button_v {
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
    border: 3px solid #006089;
    border-radius: 12px;
    font-size: 16px;
    padding: 15px 45px;
background-image: url("images/ivent.png");
background-repeat: no-repeat;}
.button_e {
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
    border: 3px solid #006089;
    border-radius: 12px;
    font-size: 16px;
    padding: 15px 45px;
background-image: url("images/iel.png");
background-repeat: no-repeat;}
.button_u {
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
    border: 3px solid #006089;
    border-radius: 12px;
    font-size: 16px;
    padding: 15px 45px;
background-image: url("images/iups.png");
background-repeat: no-repeat;}
.button_h {
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
    border: 3px solid #006089;
    border-radius: 12px;
    font-size: 16px;
    padding: 15px 45px;
background-image: url("images/heater.png");
background-repeat: no-repeat;}
h2 {
    position: absolute;
    top: -20px;
    left: 33px;
    width: 100%;
    }
h2 span {
    color: #000;
    font-size: 15px;
    line-height: 1px;
    
    }
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  #popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    height: 20vh;
    background-color: white;
    z-index: 1;
  }
  #devframe {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body onload="onload()">
<h1>Тверская-Ямская</h1>
  <div class="imc0">
    <a href="vrv.html?index=0" target="devframe" class="button_c" id="cs0">
    <h2><span id="cn0">c0</span></h2></a>
  </div>
  <div class="imc1">
    <a href="vrv.html?index=1" target="devframe" class="button_c" id="cs1">
    <h2 ><span id="cn1">c1</span></h2></a>
  </div>
  <div class="imc2">
    <a href="vrv.html?index=2" target="devframe" class="button_c" id="cs2">
    <h2 ><span id="cn2">c2</span></h2></a>
  </div>
  <div class="imc3">
    <a href="vrv.html?index=3" target="devframe" class="button_c" id="cs3">
    <h2 ><span id="cn3">c3</span></h2></a>
  </div>
  <div class="imc4">
    <a href="vrv.html?index=4" target="devframe" class="button_c" id="cs4">
    <h2 ><span id="cn4">c4</span></h2></a>
  </div>
  <div class="imc5">
    <a href="vrv.html?index=5" target="devframe" class="button_c" id="cs5">
    <h2 ><span id="cn5">c5</span></h2></a>
  </div>
  <div class="imc6">
    <a href="vrv.html?index=6" target="devframe" class="button_c" id="cs6">
    <h2 ><span id="cn6">c6</span></h2></a>
  </div>
  <div class="imc7">
    <a href="vrv.html?index=7" target="devframe" class="button_c" id="cs7">
    <h2 ><span id="cn7">c7</span></h2></a>
  </div>
  <div class="imc8">
    <a href="vrv.html?index=8" target="devframe" class="button_c" id="cs8">
    <h2 ><span id="cn8">c8</span></h2></a>
  </div>
  <div class="imc9">
    <a href="vrv.html?index=9" target="devframe" class="button_c" id="cs9">
    <h2 ><span id="cn9">c9</span></h2></a>
  </div>
  <div class="imc10">
    <a href="vrv.html?index=10" target="devframe" class="button_c" id="cs10">
    <h2 ><span id="cn10">c10</span></h2></a>
  </div>
  <div class="imc11">
    <a href="vrv.html?index=11" target="devframe" class="button_c" id="cs11">
    <h2 ><span id="cn11">c11</span></h2></a>
  </div>
  <div class="imc12">
    <a href="vrv.html?index=12" target="devframe" class="button_c" id="cs12">
    <h2 ><span id="cn12">c12</span></h2></a>
  </div>
  <div class="imc13">
    <a href="vrv.html?index=13" target="devframe" class="button_c" id="cs13">
    <h2 ><span id="cn13">c13</span></h2></a>
  </div>
  <div class="imc14">
    <a href="vrv.html?index=14" target="devframe" class="button_c" id="cs14">
    <h2 ><span id="cn14">c14</span></h2></a>
  </div>
  <div class="imc15">
    <a href="vrv.html?index=15" target="devframe" class="button_c" id="cs15">
    <h2 ><span id="cn15">c15</span></h2></a>
  </div>
  <div class="imct00">
    <a href="srk.html?index=0" target="devframe" class="button_ct" id="cts00">
    <h2 ><span id="ctn00">ct00</span></h2></a>
  </div>
  <div class="imct01">
    <a href="srk.html?index=0" target="devframe" class="button_ct" id="cts01">
    <h2 ><span id="ctn01">ct01</span></h2></a>
  </div>
  <div class="imct10">
    <a href="srk.html?index=1" target="devframe" class="button_ct" id="cts10">
    <h2 ><span id="ctn10">ct10</span></h2></a>
  </div>
  <div class="imct11">
    <a href="srk.html?index=1" target="devframe" class="button_ct" id="cts11">
    <h2 ><span id="ctn11">ct01</span></h2></a>
  </div>
  <div class="imv0">
    <a href="ventpv.html" target="devframe" class="button_v" id="vs0">
    <h2><span id="vn0">ПВ1</span></h2></a>
  </div>
  <div class="imv1">
    <a href="vent.html" target="devframe" class="button_v" id="vs1">
    <h2><span id="vn1">П2</span></h2></a>
  </div>
  <div class="imv2">
    <a href="vexh.html?index=0" target="devframe" class="button_v" id="vs2">
    <h2><span id="vn2">в7</span></h2></a>
  </div>
  <div class="imv3">
    <a href="vexh.html?index=1" target="devframe" class="button_v" id="vs3">
    <h2><span id="vn3">в3</span></h2></a>
  </div>
  <div class="imv4">
    <a href="vexh.html?index=2" target="devframe" class="button_v" id="vs4">
    <h2><span id="vn4">В5</span></h2></a>
  </div>
  <div class="imv5">
    <a href="vexh.html?index=3" target="devframe" class="button_v" id="vs5">
    <h2><span id="vn5">В4</span></h2></a>
  </div>
  <div class="imv6">
    <a href="vexh.html?index=4" target="devframe" class="button_v" id="vs6">
    <h2><span id="vn6">В7</span></h2></a>
  </div>
  <div class="ime">
    <a href="electro.html" target="devframe" class="button_e" id="es0">
    <h2><span id="en0">РЩ</span></h2></a>
  </div>
  <div class="imu">
    <a href="tyups.html" target="devframe" class="button_u" id="us0">
    <h2><span id="un0">ИБП</span></h2></a>
  </div>
  <div class="imh">
    <a href="joy.html" target="devframe" class="button_h" id="hs0">
    <h2><span id="hn0">Отопл.</span></h2></a>
  </div>
  <div id="overlay"></div>
  <div id="popup">
    <iframe id="devframe" name="devframe"></iframe>
  </div>
  <script>
    
    const overlay = document.getElementById("overlay");
    const popup = document.getElementById("popup");

    
    overlay.addEventListener("click", function () {
      overlay.style.display = "none";
      popup.style.display = "none";
    });
  </script>
</body>
<script type="text/javascript">
var myint = setInterval("getvalues()",1000);
</script>
</html>
